

import { count, log } from "console";
import React, { Component } from "react";
import type { ReactNode } from 'react'

export default class App extends Component {

    state = {
        msg: '他在家从来不收拾房间'
    }

    render() {
        return <>
            <div>
                <h1>父组件 - {this.state.msg}</h1>
                {/* 
                    2. 表单
                    3. 生命周期
                    4. axios
                 */}

                {/* 虽然内容可以显示，但是有一个报错 */}
                {/* 当前的输入框是一个只读的，不可以做任何修改，如果需要一个可以修改的输入框
                    1. 将 value 改为 defaultValue
                    2. 添加一个 onChange 事件
                */}

                {/* 该输入框无法输入任何内容，而且有报错 */}
                {/* <input type="text" value={this.state.msg} /> */}


                {/* 带有默认值的输入框，非受控输入框 */}
                {/* <input type="text" style={{ width: '300px' }} defaultValue={this.state.msg} /> */}

                {/* 受控表单 */}
                <input type="text" style={{ width: '300px' }} value={this.state.msg} onChange={(e) => {
                    this.setState({
                        msg: e.target.value
                    })
                }} />

                {/* 
                    在 React 中表单可以分为两种
                    1. 受控表单，带 value 和 onChange 的是受控
                    2. 非受控的，不带的
                */}

            </div>
        </>
    }
}